<template>
  <div class="style-music find-music-cpns">
    <swiper :swipers="swipers" v-if="swipers"></swiper>
    <recommend-list :remList="remList"></recommend-list>
    <sole-play :soleList="soleList"></sole-play>
    <newest-music :newestList="newestList"></newest-music>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'

import Swiper from '@/base-ui/swiper'
import RecommendList from '@/components/page-find-music/page-style-music/recommend-song-list'
import SolePlay from '@/components/page-find-music/page-style-music/sole-play'
import NewestMusic from '@/components/page-find-music/page-style-music/newest-music'

import { InitGetData } from '../hook/style-music'

export default defineComponent({
  components: {
    Swiper,
    RecommendList,
    SolePlay,
    NewestMusic
  },
  setup() {
    const [swipers, remList, soleList, newestList] = InitGetData()
    return {
      swipers,
      remList,
      soleList,
      newestList
    }
  }
})
</script>

<style scoped lang="less">
.style-music {
  width: 100%;
}
</style>
